<template>
	<view class="usermotto">
		<form @submit="formSubmit" >
			<text class="user-motto">昵称：</text>
			<view class="box nick-view">
				<input v-show="userInfo.nickName!==''" name="nikeName" :value="userInfo.nickName" 
				disabled="true" class="unInput"></input>
				<button v-show="userInfo.nickName===''" size="mini" open-type="getUserInfo" :disabled="hasUserInfo"  @tap="getUserInfo">
					昵称未获取，点此登录，以获取昵称
				</button>
			</view>
			
			<text class="user-motto">家长姓名：</text>
			<view class="box">
				<input name="patriarch_name":value="userInfo.patriarch_name?userInfo.patriarch_name:''" :disabled='!editing' class="weui-input" placeholder="请输入家长姓名" />
			</view>
			<text class="user-motto">家长电话：</text>
			<view class="box">
				<input name="phone":value="userInfo.phone?userInfo.phone:''" :disabled='!editing' type="number" class="weui-input" placeholder="请输入家长电话" />
			</view>
			<text class="user-motto">家庭地址：</text>
			<view class="box">
				<input name="address":value="userInfo.address?userInfo.address:''" :disabled='!editing' class="weui-input" placeholder="请输入家庭地址" />
			</view>
			<text class="user-motto">学生姓名：</text>
			<view class="box">
				<input name="stu_name":value="userInfo.stu_name?userInfo.stu_name:''" :disabled='!editing' class="weui-input"  placeholder="请输入学生姓名" />
			</view>
			<text class="user-motto">学生性别：</text>
			<radio-group @change='radioChange' class="box" >
				男<radio name="stu_gender":checked="userInfo.stu_gender=='男'?true:false" value="男" class="weui-input" :disabled='!editing'/>
				女<radio name="gender":checked="userInfo.stu_gender=='女'?true:false" value="女" class="weui-input" :disabled='!editing'/>
			</radio-group >
			<text class="user-motto">年级：</text>
			<gradepicker name="stu_grade":value="userInfo.stu_grade?userInfo.stu_grade:gradeValue" :disabled='!editing' @change='bindGradeChange'>
				{{gradeValue}}
			</gradepicker>
			<text class="user-motto">学生学校：</text>
			<view class="box">
				<input name="stu_school":value="userInfo.stu_school?userInfo.stu_school:''" :disabled='!editing' class="weui-input"  placeholder="请输入学生学校" />
			</view>
			<button :disabled='!editing' type="primary" form-type="submit" hover-class="other-button-hover"> 提交 </button>
			<button @click="changeEdit">{{editing?'取消':""}}编辑</button>
		</form>
	</view>
</template>

<script>
	
	const app = getApp()
	const db = wx.cloud.database()
	import gradepicker from '../../components/edu-picker/grade-picker.vue'
	export default {
		components:{
			gradepicker
		},
		data() {
			return {
				gradeValue:'',
				stu_gender:'',
				userInfo: {
					nickName: ""
				},
				willEdit: false,
				newUser:  false,
			}
		},
		onLoad() {
			if (app.globalData.hasUserInfo) {
				//如果app之前已经获取UserInfo，则直接写入
				this.setData({
					userInfo: app.globalData.userInfo,
				})
			}
			db.collection('student_info').where({
				_openid:app.globalData.openid
			}).get({
				success:res=>{
					console.log(res,res.data.length)
					if(res.data.length===0){
						
						this.setData({
							willEdit : true,
							newUser: true
						})
					}else if(app.globalData.hasUserInfo){
						this.userInfo = {...app.globalData.userInfo,...(res.data[0]),}
					}else{
						this.tempUserInfo = {...app.globalData.userInfo,...(res.data[0]),}
					}
				},
			})
		},
		computed:{
			editing(){
				return this.willEdit
			},
		},
		methods: {			
			getUserInfo(result) {
				if(app.globalData.hasUserInfo){
					this.userInfo = app.globalData.userInfo
					return 
				}
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: res => {
					  // 可以将 res 发送给后台解码出 unionId
						app.globalData.userInfo = res.userInfo
						app.globalData.hasUserInfo = true
						if (app.globalData.hasUserInfo){
							this.userInfo = {...this.tempUserInfo,...res.userInfo}
						}
						console.log('wx.getUserProfile',res)
					},fail: result=>{
						if (result.errMsg === 'getUserProfile:fail auth deny') {
							uni.showModal({
								title: '获取用户信息失败',
								content: '错误原因:您点击了拒绝',
								showCancel: false
							});
						}
					}
				})
			},
			setData(newData){
				Object.keys(newData).forEach(k=>{
					console.log(k,this[k],newData)
					this[k] = newData[k]
				})
			},
			changeEdit(e){
				this.willEdit = !this.willEdit
				console.log(e)
			},
			
			bindGradeChange(e){
				console.log(e)
				this.gradeValue = this.userInfo.stu_grade = e.value
			},
			radioChange(e){
				this.stu_gender = e.detail.value
				console.log(e)
			},
			formSubmit(e){
				console.log(e)
				let {nikeName, phone, stu_name} = e.target.value
				if(!nikeName){
					uni.showModal({
						title:'请先获取昵称'
					})
				}else if(!phone || !stu_name){
					uni.showModal({
						title:'请将电话和学生姓名填写完整'
					})
				}
					
				if(this.newUser){
					db.collection('student_info').add({
						data:{...e.target.value,stu_grade:this.gradeValue,stu_gender:this.stu_gender,ownedCourses:[]},
						success: res => {
							console.log(res)
						}
					})
				}else if(this.userInfo._id){
					db.collection('student_info').doc(this.userInfo._id).update({
					  data: {...e.target.value,stu_grade:this.gradeValue,stu_gender:this.stu_gender},
					  success: res => {
					    console.log(res)
						this.willEdit = false
					  },
					  fail: err => {
						  console.log(err)
					  }
					})
				}
			}
		}
	}
</script>

<style>
	.weui-input {
		padding: 5rpx;
	}
	.userinfo {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	.userinfo-avatar {
	  width: 128rpx;
	  height: 128rpx;
	  margin: 20rpx;
	  border-radius: 50%;
	}

	.unInput {
		color: #999;
		padding: 10rpx;
	}

	.usermotto {
	  /* margin-top: 100px; */
	  width: 90%;
	  margin: 0 auto;

	}
	.box{
	  border: 1rpx solid black;
	  border-radius: 10rpx;

	}
	.nick-view{
	  border: none
	}
	.liv-pic{
	}
	.loca-text{
	}
</style>
